<template>
	<view class="home">
		<view class="black_1">
			<image class="left" :src="user.avatar"></image>
			<view class="middle">
				<view class="text1">
					{{user.nickname}}
				</view>
				<view class="text2">
					ID:{{user.id}}
				</view>
			</view>
			<view class="right">
				<view class="line_1" @click="toFlow(1,'usdt')">
					<view class="line_3">
						<image class="img img1" src="/static/index/usdt.png"></image>
					</view>
					<view class="text1">{{getAccounts('usdt')}}</view>
				</view>
				<view class="line_1 line_2" @click="toFlow(2,'debris')">
					<view class="line_3">
						<image class="img img3" src="/static/index/shuipian.png"></image>
					</view>
					<view class="text1">{{getAccounts('debris')}}</view>
				</view>
			</view>
			<view class="right">
				<view class="line_1" @click="toFlow(0,'gasoline')">
					<view class="line_3">
						<image class="img img4" src="/static/index/youtong.png"></image>
					</view>
					<view class="text1 text4">{{getAccounts('gasoline')}}</view>
				</view>
				<view class="line_1 line_2" @click="toFlow(3,'speed_up')">
					<view class="line_3">
						<image class="img" src="/static/index/huojian.png"></image>
					</view>
					<view class="text1 text4">{{getAccounts('speed_up')}}</view>
				</view>
			</view>

		</view>
		<view class="black_2">
			<view class="line_2">
				<image class="img" @click="showShop()" src="/static/index/4s.png"></image>
			</view>
			<view class="line_2">
				<image class="img" @click="zmessageShow(0)" src="/static/index/messages.png"></image>
				<view v-if="!is_inner_msg_all_read" class="text1"></view>
			</view>
			<view class="line_2">
				<image class="img img1" @click="zmessageShow(1)" src="/static/index/tongzhi.png"></image>
				<view v-if="!is_notice_all_read" class="text2"></view>

			</view>
			<view class="line_2">
				<image class="img" @click="guangao()" src="/static/my/guangao.png"></image>
			</view>
		</view>

		<view class="black_3">
			<!-- <scroll-view scroll-y="true" @scrolltolower="scroll" class="qiche_block_centent"> -->
			<template v-for="(item,index) in list">
				<view class="item" :class="(index+1) % 2 == 0 ? 'item_right':'item_left'">
					<view class="chewei" @click="payQiche(item)">
						<template v-if="item.car_info">
							<template v-if="isShowTime(item.car_info.end_time)">
								<view class="time">
									<view class="text4">
										<view class="te">出租时间
											<uni-countdown color="#fff" splitorColor="#fff" :showColon="true"
												:showDay="false" :show-hour="true" :showSecond="false"
												:timestamp="item.car_info.end_time">
											</uni-countdown>
										</view>
									</view>
									<view class="text5" @click.stop="jiashu(item)">加速</view>
								</view>
							</template>
							<template v-else-if="item.car_info.is_hire">
								<view class="text1">
									{{item.car_info.shop.name}}
								</view>
							</template>
							<view v-else-if="!item.car_info.is_hire" class="text1">
								可出租
							</view>
							<image class="che" v-if="item.car_info"
								:src="'/static/index/che/qiche_'+((index+1) % 2 == 0? (item.car_info.shop.level) :(item.car_info.shop.level)+'_left') +'.png'">
							</image>
						</template>

						<view v-else-if="!item.is_open_garage" class="text1 text2">
							开通车位
						</view>


					</view>
				</view>
			</template>
			<!-- </scroll-view> -->
		</view>
		<shop4s ref="shop4s"></shop4s>
		<qiche ref="qiche" :success="accelerate"></qiche>
		<qicheHire ref="qicheHire"></qicheHire>
		<openingParking ref="openingParking"></openingParking>
		<zmessage ref="zmessage"></zmessage>

		<gonggao ref="gonggao"></gonggao>
		<ads ref="ads" :success="showAd"></ads>
		<jiashu ref="jiashu"></jiashu>
		<!-- o<ad-rewarded-vide ref="adRewardedVideo" adpid="1538016572" :preload="false" :loadnext="false" :disabled="true"
			v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
			<view class="ad-error" v-if="error">{{error}}</view>
		</ad-rewarded-video> 1538016572-->
		<ad-rewarded-video adpid="1538016572" v-slot:default="{loading, error}" ref="adRewardedVideo" :loadnext="true" @load="onadload" @close="onadclose" @error="onaderror">
			<!-- <button :disabled="loading" :loading="loading">显示广告</button> -->
			<!-- <view v-if="error">{{error}}</view> -->
		</ad-rewarded-video>
	</view>
</template>

<script>
	import shop4s from '../../components/shop4s/shop4s.vue'
	import qiche from '../../components/qiche/qiche.vue'
	//	出租
	import qicheHire from '../../components/qiche/qicheHire.vue'
	//开通车位
	import openingParking from '../../components/openingParking/openingParking.vue'
	import zmessage from '../../components/zmessage/zmessage.vue'
	import gonggao from '../../components/zmessage/gonggao.vue'
	import ads from '../../components/ads/ads.vue'
	import CryptoJS from 'crypto-js'
	import jiashu from '@/components/qiche/jiashu.vue'
	
	export default {
		components: {
			shop4s,
			qiche,
			qicheHire,
			openingParking,
			zmessage,
			gonggao,
			ads,
			jiashu
		},
		data() {
			return {
				title: '',
				list: [
					// 	{
					// 	"id": 1,
					// 	"name": "A车停车场",
					// 	"price": "0.00",
					// 	"is_auth_give": true,
					// 	"is_open_garage": true,
					// 	"car_info": {
					// 		"id": 15,
					// 		"garage_id": 1,
					// 		"shop_id": 1,
					// 		"end_time": 0,
					// 		"is_hire": false,
					// 		"shop": {
					// 			"id": 1,
					// 			"name": "A车",
					// 			"level": "1",
					// 			"day_income": "0.50",
					// 			"use_hour": 24,
					// 			"consume_num": 1
					// 		}
					// 	}
					// }
				],
				edition: {
					describe: '',
					edition_url: '', //apk、wgt包下载地址或者应用市场地址  安卓应用市场 market://details?id=xxxx 苹果store itms-apps://itunes.apple.com/cn/app/xxxxxx
					edition_force: 0, //是否强制更新 0代表否 1代表是
					package_type: 0, //0是整包升级（apk或者appstore或者安卓应用市场） 1是wgt升级
					edition_issue: 1, //是否发行  0否 1是 为了控制上架应用市场审核时不能弹出热更新框
					edition_number: 100, //版本号 最重要的manifest里的版本号 （检查更新主要以服务器返回的edition_number版本号是否大于当前app的版本号来实现是否更新）
					edition_name: '1.0.0', // 版本名称 manifest里的版本名称
					edition_silence: 0, // 是否静默更新 0代表否 1代表是
				},
				user: {
					"id": 0,
					"n_id": "",
					"mobile": "",
					"p_id": 0,
					"nickname": "中应交易所",
					"avatar": "",
					"is_auth": 0,
					"level": 0,
					"accounts": [{
							"type": "usdt",
							"amount": "0.00"
						},
						{
							"type": "gasoline",
							"amount": 0
						},
						{
							"type": "debris",
							"amount": 0
						},
						{
							"type": "speed_up",
							"amount": 0
						}
					],

				},
				is_inner_msg_all_read: false,
				is_notice_all_read: false,
				adids: 0,
				isLoading: false,
				rewardedVideoAd: null
			}
		},
		onLoad() {
			var that = this;
			if (!this.checkLogin())
				return
			this.api.http.requests('common/webSetting', {}, res => {
				that.edition.describe = res.data.version.version_update_content
				this.edition.edition_url = res.data.version.version_download_url
				this.edition.edition_number = res.data.version.version_code
				this.edition.edition_name = res.data.version.version_code_name
				//客服联系方式，返回客服二维码
				uni.setStorageSync('contact_us', res.data.contact_us)
				//团队规则介绍
				uni.setStorageSync('team_rule', res.data.team_rule)
				//共创经济规则介绍
				uni.setStorageSync('u_jackpot_rule', res.data.u_jackpot_rule)
				//申请站长缴纳费用
				uni.setStorageSync('site_apply_amount', res.data.apply_site.site_apply_amount)
				//申请站长规则
				uni.setStorageSync('site_apply_rule', res.data.apply_site.site_apply_rule)
				//加速最大值
				uni.setStorageSync('agent_margin_amount',res.data.agent_margin_amount)
				if (res.data.notice_open) {
					var notice_content = uni.getStorageSync('notice_content')
					if (notice_content != res.data.notice_content) {
						uni.setStorageSync('notice_content', res.data.notice_content)
						setTimeout(this.notice_open(res.data.notice_content), 2000)
					}
				}

				setTimeout(this.update, 2000)
			}, "POST")
			uni.$on('paySuccsse', function(data) {
				if (that.isUpdataing == 1) {
					return
				}
				if(data.type == 2){
					if(that.adids){
						that.adcal()
					}
					that.getInfo()
					return
				}
				that.list = []
				that.$refs.openingParking.close()
				that.isUpdataing = 1
				that.getQiche()
				that.getInfo()
				
			})
			uni.$on('messageSuccsse', function(data) {
				that.isAllRead()
			})

		},

		onShow() {

			var that = this;

			that.getInfo()
			that.getQiche()
			that.isAllRead()
			// that.rewardedVideoAd.show()


		},
		onReady() {
			// this.isLoading = true;
			// this.$refs.adRewardedVideo.load();
			// this.isLoading = false
			// this.rewardedVideoAd =  uni.createRewardedVideoAd({
			// 	adpid: '1507000689', //1538016572
			// 	// urlCallback: { // 服务器回调透传参数
			// 	// 	userId: 'testuser',
			// 	// 	extra: 'testdata'
			// 	// }
			// }) // 仅用于HBuilder基座调试 adpid: '1507000689'
			// console.log('onLoad event'+this.rewardedVideoAd )
			// rewardedVideoAd.onLoad(() => {
			// 	this.isLoading = true
			// 	console.log('onLoad event')
			// 	// 当激励视频被关闭时，默认预载下一条数据，加载完成时仍然触发 `onLoad` 事件
			// })

			// rewardedVideoAd.onError((err) => {
			// 	console.log('onError event', err)
			// })
			// rewardedVideoAd.onClose((res) => {
			// 	console.log('onClose event', res)
			// })
		},
		methods: {
			notice_open(notice_content) {
				this.$refs.gonggao.open(notice_content)
			},
			showShop() {
				this.$refs.shop4s.open()
			},
			zmessageShow(type) {
				this.$refs.zmessage.open(type)
			},
			update() {
				//#ifdef APP-PLUS
				var that = this
				var form = uni.getSystemInfoSync().platform
				if (form == 'ios') {
					return
				}
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (inf) => {
					if (that.edition) {
						if (Number(that.edition.edition_number) > Number(inf.versionCode)) {
							uni.navigateTo({
								url: '/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' +
									JSON.stringify(that.edition)
							});
						}
					}
				});
				//#endif

			},
			getAccounts(type) {
				var amount = '0.00'
				this.user.accounts.forEach((item) => {
					if (type == item.type) {
						amount = item.amount
						return amount
					}
				})
				return amount
			},
			isAllRead() {
				this.api.http.requests('sitemsg/isAllRead', {}, res => {
					this.is_inner_msg_all_read = res.data.is_inner_msg_all_read
					this.is_notice_all_read = res.data.is_notice_all_read
				}, "POST")
			},
			getInfo() {
				var that = this;
				this.api.http.requests('user/info', {}, res => {
					that.user = res.data
					//申请站长缴纳费用
					uni.setStorageSync('userId', res.data.id)

				}, "POST")
			},
			getQiche() {
				var that = this
				this.api.http.requests('index/lists', {}, res => {
					that.isUpdataing =0
					if( res.data.length>0){
						that.list = res.data
					}

				}, "POST")
			},
			isShowTime(end_time) {
				console.log(end_time)
				let data = new Date()
				if (data.getTime() > (end_time * 1000)) {
					return false;
				} else {
					return true;
				}

			},
			payQiche(item) {
				if(item.car_info && this.isShowTime(item.car_info.end_time)){
					this.jiashu(item)
					return
				}
				if (this.user.is_auth == 0) {
					this.custom.tool.jump(0, 'my/authentication')
					return
				}
				if (!item.is_open_garage) {
					this.$refs.openingParking.open(item)
					return
				}
				if (item.car_info) {
					if (!item.car_info.is_hire) {
						this.$refs.qicheHire.open(item)
					} else if (item.car_info.is_hire) {
						this.$refs.qiche.open(item)
					}
				}
				// console.log(item)
			},
			jiashu(item) {
				this.$refs.qiche.open(item)
			},
			accelerate(id,max_speed_up_num) {
				this.$refs.jiashu.open(id,this.getAccounts('speed_up'),max_speed_up_num)
				// var that = this
				// //加速
				// this.api.http.requests('carorder/accelerate', {
				// 	order_id: id
				// }, res => {
				// 	uni.showToast({
				// 		title: '' + res.msg,
				// 		icon: 'none'
				// 	})
				// 	that.getInfo()
				// 	that.list.length = 0
				// 	that.getQiche()
				// }, "POST")
			},
			toFlow(type, accounts) {
				uni.navigateTo({
					url: '../my/FlowDetails?type=' + type + '&amount=' + this.getAccounts(accounts)
				})
			},
			guangao() {
				this.$refs.ads.open()
			},
			scroll() {

			},
			showAd(id) {
				this.adids = id
				
				// //#ifdef APP-PLUS
				// this.$refs.adRewardedVideo.show();
				// //#endif
				// this.$refs.adRewardedVideo.show()
			},
			onadload(e) {

				console.log('广告数据加载成功');
			},
			onadclose(e) {
				const detail = e.detail
				// 用户点击了【关闭广告】按钮
				if (detail && detail.isEnded) {
					// 正常播放结束
					console.log("onadclose " + detail.isEnded);
					setTimeout(this.adcal(), 2000)
				} else {
					// 播放中途退出
					console.log("onadclose " + detail.isEnded);
				}
			},
			onaderror(e) {
				// 广告加载失败
				console.log("onaderror: ", e.detail);
			},
			adcal() {
				var that = this
				var hmac = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA256, 'adv');
				hmac.update(this.adids);
				const sign = CryptoJS.enc.Hex.stringify(hmac.finalize())
				this.api.http.requests('adv/finish', {
					id: this.adids,
					id_sign: sign
				}, res => {
					that.adids = null
					uni.showToast({
						title: '' + res.msg,
						icon: 'none'
					})
					that.getInfo()
				}, "POST")
			}

		}
	}
</script>

<style>
	page {
		background: url(@/static/index/home_bg.png) no-repeat;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		/* 背景图垂直、水平均居中 */
		/* background-position: center center; */
		/* 背景图不平铺 */
		background-repeat: no-repeat;
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		background-attachment: fixed;
	}
</style>
<style scoped lang="less">
	.black_1 {
		background-color: #0C327490;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0px 10px 10px;
		//#ifdef APP-PLUS
		padding: 40px 0px 10px 10px;

		//#endif
		.left {
			width: 50px;
			height: 50px;
			background: url(@/static/index/touxiang_bg.png);
			background-size: 100% 100%;
			padding: 12px 6px 8px 6px;
		}

		.middle {
			flex: 1;
			margin-left: 2px;
			font-size: 33rpx;
			font-weight: bold;
			color: #FFFFFF;

			.text2 {
				margin-top: 2px;
			}
		}

		.right {
			width: 30%;
			font-size: 25rpx;
			font-weight: bold;
			color: #FFFFFF;
			// width: 100px;
			text-align: end;

			.line_1 {
				text-align: end;
				display: flex;
				align-items: center;

				.line_3 {
					width: 30px;
				}

				.img {
					width: 30px;
					height: 30px;
				}

				.img1 {
					width: 30px;
					height: 30px;
				}

				.img3 {
					width: 25px;
					height: 30px;
				}

				.img4 {
					width: 25px;
					height: 30px;
				}

				.text1 {
					text-align: center;
					margin-left: -10px;
					width: 105px;
					padding: 1px 0px;
					background: #13131380;
					border-radius: 25rpx;
				}

				.text4 {
					width: 80px;
				}

			}

			.line_2 {
				margin-top: 10px;

			}
		}
	}

	.black_2 {
		margin-top: 10px;
		display: flex;
		position: relative;

		.line_2 {
			.img {
				width: 50px;
				height: 50px;
				margin-left: 20px;
			}

			.img1 {
				height: 55px;
			}

			.text1 {
				position: absolute;
				margin-top: -45px;
				margin-left: 50px;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: red;
			}

			.text2 {
				position: absolute;
				margin-top: -50px;
				margin-left: 50px;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: red;
			}

		}

	}

	.black_3 {
		position: absolute;
		bottom: 10px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.qiche_block_centent {
			height: 400px;
		}

		.item {
			display: inline-flex;
			width: 50%;
			height: 100px;
			text-align: center;

			.chewei {
				margin: 0px auto;
			}

			.text1 {
				// margin: auto;
				// position: absolute;
				left: 0;
				right: 0;
				line-height: 44rpx;
				text-align: center;
				font-size: 19rpx;
				font-weight: 400;
				color: #FFFFFF;
				width: 247rpx;
				height: 44rpx;
				background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 49%, rgba(0, 0, 0, 0) 100%);
			}

			.text2 {
				// position: absolute;
				// margin: auto;
				margin: 35px auto auto auto;
			}

			.che {
				margin-top: -15px;
				width: 90px;
				height: 73px;
			}

			.time {
				display: flex;
				align-items: center;
				font-size: 19rpx;
				font-weight: 400;
				color: #FFFFFF;

				.text4 {
					width: 105px;
					height: 0px;
					border-top: 20px solid #00000088;
					border-right: 16px solid transparent;

					.te {
						margin-top: -19px;
						display: flex;
						align-items: center;
					}
				}

				.text5 {
					// margin-top: -15px;
					margin-left: -12px;
					font-weight: bold;
					border-bottom: 20px solid #FE903D;
					border-left: 15px solid transparent;
					//border-right: 25px solid transparent;
					height: 0;
					width: 40px;
					font-size: 25rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.item_right {
			width: 50%;
			height: 95px;
			background: url(@/static/index/chewei_right.png) no-repeat;
			background-size: 100% 100%;
		}

		.item_left {
			width: 50%;
			height: 95px;
			background: url(@/static/index/chewei_left.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>